<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,body{
				width:100%;
				height:100%;
				background: url(img/login/denglu-bg.png) no-repeat;
				background-size: cover;
			}
			.mui-content{
				width:100%;
				height:100%;
				background: url(img/login/denglu-bg.png) no-repeat;
				background-size: cover;
			}
			.dl-con{
				width: 90%;
				height: 11.4rem;
				margin: 0 5%;
				background: #fff;
				background: rgba(255,255,255,.7);
				border-radius: 0.18rem;
				margin-top: 2.3rem;
				padding-top: 0.6rem;
			}
			.app-icon{
				width: 1.68rem;
				height: 1.68rem;
				margin: 0 auto;				
			}
			.app-icon img{
				width: 1.68rem;
				height: 1.68rem;
			}
			.dl-xinxi{
				width: 100%;
				height: 3rem;
				margin-top: 0.4rem;
				padding:0 5%;
			}
			.dl-xinxi input{
				width: 100%;
				height:1rem;
				border:0;
				border-bottom: 1px solid #ADA7AC;
				padding-left: 1.2rem;
				font-size: 0.43rem;
				color: #ADA7AC;
			}
			.dl-xinxi #account{
				background: url(img/login/zhanghao-bg.png) no-repeat center left;
				background-size:0.46rem 0.53rem;
				background-position-x: 0.21rem;
			}
			.dl-xinxi #password{
				background: url(img/login/mima-bg.png) no-repeat center left;
				background-size: 0.43rem 0.53rem;
				background-position-x: 0.21rem;
				margin-top:0.2rem;			
			}
			#xieyi {
				font-size: 0.37rem;
				text-align: center;
				margin-top: 0.2rem;
			}
			.denglu-button{
				width: 100%;
				height: 1.43rem;
				padding: 0 5%;
				margin-top: 0.5rem;
			}
			.denglu-button button{
				width: 100%;
				height: 1.43rem;
				background: #fc7191;
				border: 0;
				border-radius: 0.15rem;
				color: #fff;
				font-size: 0.5rem;
				font-family: "微软雅黑";
			}
			.other{
				width: 100%;
				text-align: center;
				margin-top: 0.4rem;
				position: relative;
			}
			.kuaijie{
				color: #8f8c8e;
				font-size: 0.43rem;
				font-family: "微软雅黑";
				margin-bottom: 0.2rem;
			}
			.other img{
				width: 1.28rem;
				height: 1.28rem;
				position: absolute;
			}
			.other #qq{
				left: 25%;
			}
			.other #weixin{
				right: 25%;
			}
			.button{
				width: 100%;
				display: flex;
				margin-top: 0.6rem;
			}
			.button div{
				color: #fff;
				font-size: 0.56rem;
				font-family: "微软雅黑";
				width: 100%;
				text-align: center;
			}
			.button .dl-dl{
				border-right: 1px solid #ADA7AC;
				color: #fff;
			}
			@media only screen and (min-width: 414px) and (max-width: 768px) {
				.mui-content{
					background-size: 100% 100%;
				}
				.button{
					margin-top: 1rem;
				}
			}
			@media only screen and (min-width: 769px) and (max-width: 1024px) {
				.mui-content{
					background-size: 100% 100%;
				}
				.dl-con{
					margin-top: 5.43rem;
					height: 13.4rem;
					padding-top: 1rem;
				}
				.dl-xinxi{
					margin-top: 1rem;
					height: 3.2rem;
				}
				.dl-xinxi input{
					height: 1.2rem;
				}
				#xieyi{
					margin-top: 0.4rem;
				}
				.denglu-button{
					margin-top: 0.8rem;
				}
				.other{
					margin-top: 0.7rem;
				}
				.kuaijie{
					margin-bottom: 0.5rem;
				}
				.button{
					margin-top: 2rem;
				}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="app-header">
			<h1 class="mui-title" id="denglu-title">颜值同城交友</h1>
		</header>
		<div id="login" class="mui-content">
			<div class="dl-con">
				<div class="app-icon">
					<img src="img/login/app-icon.png" alt="" />					
				</div>
				<div class="dl-xinxi">
					<input id="account" type="text" placeholder="请输入账号" />
					<input id="password" type="password" placeholder="请输入登录密码" />
				</div>
				<div id="xieyi" class="denglu">
					<label><input type="checkbox" id="checkbox" checked="checked"/>已阅读</label>
					<a href=" ">《用户注册协议》</a>且年满18周岁
				</div>
				<div class="denglu-button">
					<button id="loging">登录</button>
				</div>
				<div class="other">
					<div class="kuaijie">快捷方式登录</div>
					<img id="qq" src="img/login/dl-qq.png">
					<img id="weixin" src="img/login/dl-weixin.png" />
				</div>
			</div>
			<div class="button">
				<div class="yijian-zhuce" id="register">一键注册</div>
			</div>
		</div>

	</body>
	<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/Brush.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/function.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/FirstPage.js" type="text/javascript" charset="utf-8"></script>
</html>